<template>
  <el-main>
  <!-- 面包屑头顶标签 -->
  <el-header>
      <h4>脚标机监控列表</h4>
      <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>脚标机监控管理</el-breadcrumb-item>
      <el-breadcrumb-item>脚标机监控列表</el-breadcrumb-item>
      </el-breadcrumb>
  </el-header>
  <!-- 头顶标签结束 -->
  <!-- 页面信息 -->
  <el-card>
      <!-- 搜索与添加 -->
      <el-row :gutter="20">
        <el-col :span="2">
          <el-button type="success" icon="el-icon-refresh" @click="getList()"></el-button>
        </el-col>
        <el-col :span="7" :offset="15"><div><el-input placeholder="请输入内容" v-model="queryInfo.query" @input="searchList" clearable>
                          <el-button slot="append" icon="el-icon-search" @click="searchList"></el-button>
                          </el-input></div></el-col>
      </el-row>
      <!-- 信息表格 -->
      <el-table :data="tableData" border>
        <el-table-column label="脚标机编号" prop="barcodeMachineId" sortable></el-table-column>
        <el-table-column label="登陆时间" prop="loginDate" sortable :formatter="dateFormat"></el-table-column>
        <el-table-column label="在线状态" prop="state" sortable>
          <!-- eslint-disable-next-line -->
          <template slot-scope="scope">
              <el-tag type="info" effect="dark" v-if="scope.row.state == 0">离线</el-tag>
              <el-tag type="success" effect="dark" v-if="scope.row.state == 1">正常</el-tag>
              <el-tag type="danger" effect="dark" v-if="scope.row.state == 2">卡纸</el-tag>
              <el-tag type="warning" effect="dark" v-if="scope.row.state == 3">缺纸</el-tag>
          </template>
          <template slot="scope">
              
          </template>
        </el-table-column>
        <el-table-column label="条形码剩余量" prop="barcodeSurplus" sortable></el-table-column>
        <el-table-column label="用户" prop="name" sortable></el-table-column>
        <el-table-column label="下线时间" prop="offlineTime" sortable :formatter="dateFormat"></el-table-column>
        <el-table-column label="操作" width="180px">
          <!-- eslint-disable-next-line -->
          <template slot-scope="scope" style="margin-right: 0px">
            <el-button type="success" class="el-icon-setting" size="mini" @click="showDetailDialogVisible(scope.row.id)">明细</el-button>
            <el-button type="primary" class="el-icon-edit" size="mini" @click="showEditDialogVisible(scope.row.id)">编辑</el-button>
            <el-button type="danger" class="el-icon-delete" size="mini" @click="deleteList(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[10, 25, 50, 100]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      
      <!-- 信息表格结束 -->
      </el-card>
      <!-- 编辑弹窗信息页面 -->
      <el-dialog title="编辑信息" :visible.sync="editDialogVisible" width="50%" @close="dialogClose()">
        <!-- 内容主题区 -->
        <el-card>
            <el-form :model="Form" :rules="FormRules" ref="FormRef" label-width="100px">
              <el-form-item label="脚标机编号" prop="barcodeMachineId">
                <el-input v-model="Form.barcodeMachineId" ></el-input>
              </el-form-item>
              <el-form-item label="登陆时间" prop="loginDate">
                  <el-date-picker v-model="Form.loginDate"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  >
                  <!-- <el-input v-model="Form.loginDate" ></el-input> -->
                  </el-date-picker>
              </el-form-item>
              <el-form-item label="在线状态" prop="state">
                <el-input v-model="Form.state" ></el-input>
              </el-form-item>
              <el-form-item label="条形码剩余" prop="barcodeSurplus">
                <el-input v-model="Form.barcodeSurplus" ></el-input>
              </el-form-item>
              <el-form-item label="用户" prop="name">
                <el-select v-model="Form.name" filterable placeholder="请选择">
                  <el-option
                    v-for="item in userName"
                    :key="item.userId"
                    :label="item.loginName+`[id=`+item.userId+`]`"
                    :value="item.userId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="下线时间" prop="offlineTime">
                <el-date-picker v-model="Form.offlineTime"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  >
                  <!-- <el-input v-model="Form.loginDate" ></el-input> -->
                  </el-date-picker>
              </el-form-item>
              <el-form-item label="创建者" prop="loginName">
                <el-input v-model="Form.loginName" :disabled="true"></el-input>
              </el-form-item>
              </el-form>
        </el-card>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose()">取 消</el-button>
        <el-button type="primary" @click="editMsgForm()"
            >确 定</el-button
        >
        </span>
    </el-dialog>

  <!-- 页面信息结束 -->
  <!-- 明细弹窗信息页面 -->
      <el-dialog title="编辑信息" :visible.sync="detailDialogVisible" width="50%" @close="dialogClose()">
        <!-- 内容主题区 -->
        <el-card>
            <el-form :model="Form" :rules="FormRules" ref="FormRef" label-width="100px" :disabled="true">
              <el-form-item label="脚标机编号" prop="barcodeMachineId">
                <el-input v-model="Form.barcodeMachineId" ></el-input>
              </el-form-item>
              <el-form-item label="登陆时间" prop="loginDate">
                  <el-date-picker v-model="Form.loginDate"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  >
                  <!-- <el-input v-model="Form.loginDate" ></el-input> -->
                  </el-date-picker>
              </el-form-item>
              <el-form-item label="在线状态" prop="state">
                <el-input v-model="Form.state" ></el-input>
              </el-form-item>
              <el-form-item label="条形码剩余" prop="barcodeSurplus">
                <el-input v-model="Form.barcodeSurplus" ></el-input>
              </el-form-item>
              <el-form-item label="用户" prop="name">
                <el-select v-model="Form.name" filterable placeholder="请选择">
                  <!-- <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option> -->
                </el-select>
              </el-form-item>
              <el-form-item label="下线时间" prop="offlineTime">
                  <el-date-picker v-model="Form.offlineTime"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  >
                  <!-- <el-input v-model="Form.offlineTime" ></el-input> -->
                  </el-date-picker>
              </el-form-item>
              <el-form-item label="创建者" prop="loginName">
                <el-input v-model="Form.loginName" ></el-input>
              </el-form-item>
              </el-form>
        </el-card>
        <!-- 脚标机市场信息 -->
      <el-card>
      <!-- 搜索与添加 -->
      <el-row :gutter="20">
        <el-col :span="2">
          <el-button type="success" icon="el-icon-refresh" @click="showData(searchId)"></el-button>
        </el-col>
        <el-col :span="7" :offset="15"><div><el-input placeholder="请输入内容" v-model="queryInfo.query" @input="searchList" clearable>
                          <el-button slot="append" icon="el-icon-search" @click="searchList"></el-button>
                          </el-input></div></el-col>
      </el-row>
      <!-- 信息表格 -->
      <el-table :data="Form.stallsMessageVoPage.records" border>
        <el-table-column label="条码编号" prop="barcodeNumber" sortable></el-table-column>
        <el-table-column label="脚标机编号" prop="barcodeMachineId" sortable></el-table-column>
        <el-table-column label="贴标时间" prop="labelingDate" sortable :formatter="dateFormat"></el-table-column>
        <el-table-column label="所属禽类" prop="poultryParentName" sortable></el-table-column>
        <el-table-column label="去向档口名称" prop="stallsName" sortable></el-table-column>
        <el-table-column label="详细地址" prop="address" sortable></el-table-column>
      </el-table>
      <!-- 分页区域 -->
      
    <el-pagination
        @size-change="handleSizeChange2"
        @current-change="handleCurrentChange2"
        :current-page="stallsMessageInfo.pageNum"
        :page-sizes="[10, 25, 50, 100]"
        :page-size="stallsMessageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Form.stallsMessageVoPage.total"
      >
      </el-pagination>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose()">取 消</el-button>
        <el-button type="primary" @click="dialogClose()"
            >确 定</el-button
        >
        </span>
        </el-card>
    </el-dialog>

  <!-- 页面信息结束 -->
  </el-main>
</template>

<script>
export default {
  name:"barcodeMachineStatus",
  data() {
    return {
      queryInfo: {
        //模糊查找输入
        query: "",
        //初始化当前页数
        pageNum: 1,
        //初始化当前每页显示多少条
        pageSize: 50,
      },
      // 查找id保存
      searchId:'',
      stallsMessageInfo: {
        //初始化当前页数
        pageNum: 1,
        //初始化当前每页显示多少条
        pageSize: 50,
      },
      //用户列表数据
      userName:[],
      //表格数据
      tableData: [],
      total: 0,
      size: 0,
      //控制对话框弹出
      editDialogVisible: false,
      detailDialogVisible:  false,
      //信息的表单数据
      Form:{
        id:'',
        barcodeMachineId: '',
        loginDate: '',
        state: '',
        barcodeSurplus: '',
        name: '',
        offlineTime: '',
        loginName: '',
        stallsMessageVoPage:'',
    },
      //验证规则
      FormRules:{
        barcodeMachineId:  [{
          required: true ,
          message:'请输入内容',
          trigger:'blur'
        }],
        loginDate:  [{
          required: true ,
          message:'请输入内容',
          trigger:'blur'
        }],
        state:  [{
          required: true ,
          message:'请输入内容',
          trigger:'blur'
        }],
        barcodeSurplus:  [{
          required: true ,
          message:'请输入内容',
          trigger:'blur'
        }],
        name:  [{
          required: true ,
          message:'请输入内容',
          trigger:'blur'
        }],
        offlineTime:  [{
          required: true ,
          message:'请输入内容',
          trigger:'blur'
        }],
        loginName:  [{
          required: true ,
          message:'请输入内容',
          trigger:'blur'
        }],
      },


    }
  },
  methods: {
    //模糊查询
    async searchList(){
      this.queryInfo.pageNum  =  1
      this.queryInfo.pageSize = 50
      if(this.queryInfo.query == '')  {
        this.getList()
        return
      }
      const { data: res } = await this.reqM1Service(`barcodeMachineStatus/barcodeMachineStatus/findByLike?input=${this.queryInfo.query}&pageCurrent=${this.queryInfo.pageNum}&pageSize=${this.queryInfo.pageSize}`, "", "get");
        console.log(res);
        if (res.code != 2000) {
          return this.$message.error(res.message);
        }
        this.tableData = res.data.records
        this.total = res.data.total
      
    },
    //获取信息
    async  getList(){
      const { data: res} = await this.reqM1Service(
        `barcodeMachineStatus/barcodeMachineStatus/findPageVo?pageCurrent=${this.queryInfo.pageNum}&pageSize=${this.queryInfo.pageSize}`,
        "",
        "get"
      )
      console.log(res)
      if (res.code != 2000){
        return this.$message.error(res.message)
      }
      this.tableData =res.data.records
      this.total = res.data.total;
      

    },
    //监听  页码值  改变的事件
    handleSizeChange(newSize){
      this.queryInfo.pageSize=newSize
      this.getList()
    },
    //监听 当前页数 改变的事件
    handleCurrentChange(newPage){
      this.queryInfo.pageNum=newPage
      this.getList()
    },
    //监听 stallsMessage 页码值  改变的事件
    handleSizeChange2(newSize){
      this.stallsMessageInfo.pageSize=newSize
      this.showData(this.searchId)
    },
    //监听 stallsMessage 当前页数 改变的事件
    handleCurrentChange2(newPage){
      this.stallsMessageInfo.pageNum=newPage
      this.showData(this.searchId)
    },
    //删除
    async deleteList(id){
      const { data: res} = await this.reqM1Service(
        `/barcodeMachineStatus/barcodeMachineStatus/deleteById/${id}`,
        "",
        "delete"
      )
      console.log(res)
      if (res.code == 2000){
        this.getList()
        return this.$message.success(res.message)
      }else {
        return this.$message.error(res.message)
      }
    },
    //对话框关闭重置内容
    dialogClose(){
    this.$refs.FormRef.resetFields()
    this.editDialogVisible = false
    this.detailDialogVisible  = false
    },
    //展示明细弹窗
    showDetailDialogVisible(id){
      this.detailDialogVisible = true
      this.searchId  = id
      this.showData(id)
      this.getUserName()
    },
    //展示编辑弹窗
    showEditDialogVisible(id){
      this.editDialogVisible = true
      this.searchId = id
      this.showData(id)
      this.getUserName()
    },
    //渲染原有数据
    async showData(id){
      const { data: res} = await this.reqM1Service(
        `barcodeMachineStatus/barcodeMachineStatus/findVoById/${id}?pageCurrent=${this.stallsMessageInfo.pageNum}&pageSize=${this.stallsMessageInfo.pageSize}`,
        "",
        "get"
      )
      console.log(res)
      if (res.code !== 2000) {
          return this.$message.error(res.message)
        }
        else {
          this.Form = res.data
          }
      },
      //编辑表单信息提交
    async editMsgForm(){
      //表单预验证
      this.$refs.FormRef.validate(async validate=>{
      console.log(validate);
      if(!validate) return;
      this.Form.id  = this.searchId
      //发起请求
      await this.reqM1Service(`barcodeMachineStatus/barcodeMachineStatus/updateById`,this.Form,"put").then(
        ({ data: res} )=>{
        console.log(res);
        if (res.code != 2000) {
          return this.$message.error("编辑失败！")
        }
        else {
          this.$message.success("编辑成功！")
          this.dialogClose();
          this.getList();
        }
      })
      
    })
    },
    //用户列表获取
    async getUserName(){
      await this.reqM1Service(`barcodeMachineStatus/barcodeMachineStatus/indUserNameVoList`,"","get").then(
        ({ data: res} )=>{
        console.log(res);
        if (res.code != 2000) {
          return this.$message.error("获取用户失败！")
        }
        else {
          this.userName = res.data
          console.log(this.userName)
        }
      })
    },




    //时间格式化
      dateFormat(row, column, cellValue, index){
          const daterc = row[column.property]
          if(daterc!=null){
            const dateMat= new Date(parseInt(daterc.replace("/Date(", "").replace(")/", ""), 10));
          const year = dateMat.getFullYear();
          const month = dateMat.getMonth() + 1;
          const day = dateMat.getDate();
          const hh = dateMat.getHours();
          const mm = dateMat.getMinutes();
          const ss = dateMat.getSeconds();
          const timeFormat= year + "/" + month + "/" + day + " " + hh + ":" + mm + ":" + ss;
          return timeFormat;
          }
      }
  },
  created() {
    this.getList()
  },
};
</script>
<style lang="less" scoped>
/deep/ th{
	color: #606266
}
/deep/ .el-button + .el-button {
  margin-left: 5px;
}
/deep/ .el-button--mini {
  padding: 6px 2px;
}
/deep/ .el-card{
  margin-bottom: 20px;
}
/deep/ .el-tag{
  margin-left: 32%;
}
</style>
